<template>
  <span class="select-wrap">
    <el-cascader
      v-if="getLabelLength > 5000"
      popper-class="label-cascader"
      :options="callLabel.searchFirstLabel"
      v-model="selectedOptions"
      :props="labelProps"
      filterable
      size="mini"
      @change="handleChange"
      @expand-change="expand"
      @visible-change="visibleChange"
      collapse-tags
      change-on-select
      clearable
      separator=">"
    ></el-cascader>
    <el-cascader
      v-else
      popper-class="label-cascader"
      :options="callLabel.searchFirstLabel"
      v-model="selectedOptions"
      :props="{ checkStrictly: true, multiple: true }"
      filterable
      size="mini"
      @change="handleChange"
      @expand-change="expand"
      @visible-change="visibleChange"
      collapse-tags
      change-on-select
      clearable
      separator=">"
    ></el-cascader>
  </span>
</template>
<script>
import {
  getAllUseMultiCallLabel,
  getAllUseSingleCallLabel,
} from "@/utils/m7Utils.js";
export default {
  name: "labelSelect",
  props: {
    filterable: Boolean,
    stringFlag: Boolean, // 通话高级搜索带上name值
    resetSelect: Boolean,
    isClear: Boolean,
    isNoLabel: { type: Boolean, default: false }, // 第一级是否展示"无标签" eg: 通话高级搜索
    needType: { type: Boolean, default: false }, // 选择标签时，是否需要把当前标签的type emit 出去
  },
  data() {
    return {
      selectedOptions: [], // 标签树形选中的值
      callLabel: {}, // 标签树形的数据
      labelProps: {
        lazy: true,
        checkStrictly: true,
        multiple: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve();
          }, 50);
        },
      },
    };
  },
  watch: {
    resetSelect: "resetSelectes",
    isClear: "isCleares",
  },
  computed: {
    getLabelLength() {
      return Object.keys(this.$store.state.allKeyLabels || {}).length;
    },
  },
  methods: {
    handleChange(arr) {
      this.noElection(arr);
      // change树形
      let idArr = [];
      let isAll = false;
      let labelType = "multi";
      if (this.needType) {
        // 质检和智能质检需要标签类型
        this.$emit("labelSelect",{ arr: isAll ? [] : idArr, type: labelType },"multiCallLabel");
      } else {
        this.$emit("labelSelect", isAll ? [] : arr, "multiCallLabel");
      }
    },
    // 当展开节点发生变化时触发
    expand() {
      this.noElection(this.selectedOptions);
    },
    //解决搜索之后打开弹窗未互斥
    visibleChange(flag) {
      if(flag){
        this.noElection(this.selectedOptions);
      }
    },
      // 处理禁用数据
    noElection(data) {
      // 接收的参数为Cascader Events —— expand-change —— 当展开节点发生变化时触发	—— 各父级选项值组成的数组
      setTimeout(() => {
        // 延时器是为了拿到最新值
        // 获取展开的面板
        let wrap = document.querySelectorAll(".el-cascader-panel")
        //发现还有个满意度也是此标签，所以这边判断当前打开是哪个就选哪个
        let index = Array.from(wrap).findIndex(item=>{
          return item.clientHeight!=0&&item.clientWidth!=0
        })
        let menu = wrap[index].querySelectorAll(".el-cascader-menu")
        let label, span, input
        let idList = []
        // 为对应的节点添加相应的类名及属性
        if (data && data.length > 0) {
          Array.from(data).forEach((item) => {
            item.forEach((i) => {
              idList.push(i._id)
            })
          });
          for (let i = 0; i < menu.length; i++) {
            label = menu[i].querySelectorAll("li label");
            span = menu[i].querySelectorAll("li label .el-checkbox__input");
            input = menu[i].querySelectorAll(
              "li label .el-checkbox__input input"
            );
            //所有的第一的menu 全部和无标签除外，其他禁止
             if (idList.includes("noLabel")) {
              label.forEach((val, index) => {
                val.classList.add("is-disabled");
                if (i == 0&&index == 1) {
                  val.classList.remove("is-disabled");
                }
              });
              span.forEach((val, index) => {
                val.classList.add("is-disabled");
                if (i == 0&&index == 1) {
                  val.classList.remove("is-disabled");
                }
              });
              input.forEach((val, index) => {
                val.setAttribute("disabled", "disabled");
                if (i == 0&&index == 1) {
                    val.removeAttribute("disabled", "disabled");
                }
              });
            } else if (idList.includes("")) {
              label.forEach((val, index) => {
                val.classList.add("is-disabled");
                if (i == 0&&index == 0) {
                  val.classList.remove("is-disabled");
                }
              });
              span.forEach((val, index) => {
                val.classList.add("is-disabled");
                if (i == 0&&index == 0) {
                  val.classList.remove("is-disabled");
                }
              });
              input.forEach((val, index) => {
                val.setAttribute("disabled", "disabled");
                if (i == 0&&index == 0) {
                  val.removeAttribute("disabled", "disabled");
                }
              });
            } else {
              label.forEach((val, index) => {
                val.classList.remove("is-disabled");
                if (i == 0&&index == 1) {
                  val.classList.add("is-disabled");
                }
              });
              span.forEach((val, index) => {
                val.classList.remove("is-disabled");
                if (i == 0&&index == 1) {
                  val.classList.add("is-disabled");
                }
              });
              input.forEach((val, index) => {
                val.removeAttribute("disabled", "disabled");
                if (i == 0&&index == 1) {
                  val.setAttribute("disabled", "disabled");
                }
              });
            }
          }
        }
        // 为空时，取消对应的类名及属性
        if (data.length == 0) {
          for (let i = 0; i < menu.length; i++) {
            label = menu[i].querySelectorAll("li label");
            span = menu[i].querySelectorAll("li label .el-checkbox__input");
            input = menu[i].querySelectorAll(
              "li label .el-checkbox__input input"
            );
            label.forEach((val) => {
              val.classList.remove("is-disabled");
            });
            span.forEach((val) => {
              val.classList.remove("is-disabled");
            });
            input.forEach((val) => {
              val.removeAttribute("disabled", "disabled");
            });
          }
        }
      }, 100);
    },
    resetSelectes(cur, prev) {
      if (this.resetSelect) {
        this.selectedOptions = [];
        this.$emit("labelSelect", [], "multiCallLabel");
        this.reset()
      }
    },
    isCleares() {
      if (this.isClear) {
        // 高级搜索的清空操作
        this.selectedOptions = [];
        this.$emit("labelSelect", [], "multiCallLabel");
        this.reset()
      }
    },
    reset(){
       // 获取展开的面板
      let wrap = document.querySelectorAll(".el-cascader-panel")
      //发现还有个满意度也是此标签，所以这边判断当前打开是哪个就选哪个
      let index = Array.from(wrap).findIndex(item=>{
        return item.clientHeight!=0&&item.clientWidth!=0
      })
      let menu = wrap[index].querySelectorAll(".el-cascader-menu")
      let label, span, input;
      for (let i = 0; i < menu.length; i++) {
        label = menu[i].querySelectorAll("li label");
        span = menu[i].querySelectorAll("li label .el-checkbox__input");
        input = menu[i].querySelectorAll(
          "li label .el-checkbox__input input"
        );
        label.forEach((val) => {
          val.classList.remove("is-disabled");
        });
        span.forEach((val) => {
          val.classList.remove("is-disabled");
        });
        input.forEach((val) => {
          val.removeAttribute("disabled", "disabled");
        });
      }
    }
  },
  beforeMount() {
    let allLabel = this.$getCache("callLabel");
    if (allLabel === -1) {
      allLabel = [];
    }
    let search = true;
    let singleObj = getAllUseSingleCallLabel(allLabel, search);
    let multiObj = getAllUseMultiCallLabel(
      allLabel,
      singleObj.searchSingleLabel,
      search
    );
    this.callLabel = multiObj;
    const nullObj = {
      value: { _id: "noLabel", name: "无标签" },
      label: "无标签",
    };
    const allObj = { value: { _id: "", name: "全部" }, label: "全部" };
    if (!allLabel) {
      //   解决刷新页面   数据取不到
      this.$store.dispatch("getCache", { type: "callLabel" }).then((res) => {
        allLabel = res || [];
        singleObj = getAllUseSingleCallLabel(allLabel, search);
        multiObj = getAllUseMultiCallLabel(
          allLabel,
          singleObj.searchSingleLabel,
          search
        );
        this.callLabel = multiObj;
        if (this.callLabel.searchFirstLabel && this.isNoLabel) {
          this.callLabel.searchFirstLabel.unshift(nullObj);
        }
        this.callLabel.searchFirstLabel.unshift(allObj);
      });
    } else {
      if (this.callLabel.searchFirstLabel && this.isNoLabel) {
        this.callLabel.searchFirstLabel.unshift(nullObj);
      }
      this.callLabel.searchFirstLabel.unshift(allObj);
    }
  },
};
</script>
<style lang="stylus" scoped>
.adv-search-width
  width 192px
  margin-right 14px
.seletct-padding
 padding 0 10px
.select-wrap
  .el-select
    width 30%
.label-select-option
  max-width 500px
  height auto
  word-wrap break-word
  white-space normal
</style>
